<!DOCTYPE html>
<head>
    <title></title>
    <style>
        html,body
        {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
    <meta charset="utf-8"/>
    <link href="css/vide.css" rel="stylesheet" type="text/css" />
    <script src="lib/jquery-1.8.0.js"></script>
    <script src="js/fullScreenApi.js"></script>
    <script src="js/videoPlayer.js"></script>
    <script>
        $(document).ready(function(){
            var videoPlayer= new ws.VideoPlayer($("#videoContainer"));
			$("#test").click(function(){
				var ary = ["http://www.jplayer.org/video/m4v/Finding_Nemo_Teaser.m4v","http://www.jplayer.org/video/ogv/Finding_Nemo_Teaser.ogv"];
				var emtyAry = ["",""];
				videoPlayer.setSrc(ary)
			})
        });
    </script>
</head>
<body>
    <div id="videoContainer">
        <video class="myVideo">
            <source src="http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v" type="video/mp4" />
            <source src="http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv" type="video/ogg" />
        </video>
		<div class="loadingMask">
            <div class="loadingIcon"><img src="image/loading.gif"></div>
        </div>
		<div class="playMask">
			<div class="playIcon"><img src="image/playIcon.png"></div>
		</div>
        <div class="controlPanel">
            <div class="play"></div>
            <div class="progress">
                <div class="bg"></div>
                <div class="loadBar"></div>
                <div class="timeBar"></div>
                <div class="dragger"></div>
            </div>
            <div class="timeLabel">00:00:00/00:00:00</div>
            <div class="volume">
                <div class="volumeIcon"></div>
                <div class="volumePanel">
                    <div class="scrollBar">
                        <div class="bar"></div>
                        <div class="bg"></div>
                        <div class="dragger"></div>
                    </div>
                </div>
            </div>
            <div class="fullScreen"></div>
        </div>
    </div>
</body>
</html>